<template>
	<view>
		<view class="nav">
			<zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs">
			</zzx-tabs>
		</view>
		<view class="top_line"></view>
		<view class="content">
			<mescroll-uni class="scroll-Y" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption"
				@up="upCallback" top="80">
			 <view class="content_list" v-if="item!=''" v-for="(item,index) in list" :key="index"
					@click="toDetail(item.msgId,item.BusinId,item.BusinKind)">
					<view class="contenr_top">
						<text>{{item.msgTitle}}</text>
					</view>
					<view class="contenr_center">
						<text>{{item.msgtxt}}</text>
					</view>
					<view class="contenr_bottom">
						<view class="bottom_left">
							<text>最新动态：{{item.msgDate | dateFormat}}</text>
						</view>
						<view class="bottom_right">
							<!-- <u-icon name="more-dot-fill" size="20px"></u-icon> -->
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	export default {
		components: {
			zzxTabs
		},
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					// page: {
					//     size: 10 // 每页数据的数量
					// },
					noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无数据 ~', // 提示
					}
				},
				list: [],
				params: {
					PageIndex: 1,
					PageSize: 10
				},
				items: [],
				current: 0,
				State: 0,
				paramsRead: {
					msgId: ''
				},
			};
		},
		onShow() {
			if (this.mescroll) {
				this.list = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			if (!userInfo) {
				this.$u.route({
					type: "reLaunch",
					url: "/pages/login/login"
				});
			} else {
				//这里调首页的数据
				//this.initNotice()
			}
		},
		onNavigationBarSearchInputConfirmed(e) {
			uni.hideKeyboard()
			this.list = [] // 先置空列表,显示加载进度
			this.mescroll.resetUpScroll() // 再刷新列表数据
		},
		methods: {
			async upCallback(page) {
				let queryJson = {};
				queryJson = {
					"State": this.current
				}

				this.params.PageIndex = page.num == undefined ? 1 : page.num
				this.params.queryJson = queryJson
				//console.log(this.params)
				const networkType = await new Promise((resolve) => {
					uni.getNetworkType({
						success: (res) => resolve(res.networkType)
					});
				});
				var data = {}
				if (networkType === 'none') {
					data = {
						Read0Num:0,
						Read1Num:0,
						MsgList:[]
					}
				}else{
					data = await this.$u.api.UserMsg(this.params)
				}
				this.items = ['未读(' + data.Read0Num + ')', '已读(' + data.Read1Num + ')'];
				let rows = data.MsgList
				console.log('ddd')
				console.log(data.MsgList)
				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				this.mescroll.endSuccess(rows.length);
				//设置列表数据
				if (page.num == 1 || page.num == undefined) this.list = []; //如果是第一页需手动制空列表
				this.list = this.list.concat(rows); //追加新数据
				//console.log(this.list)
				this.mescroll.optUp.textNoMore = "已全部加载,共 " + this.list.length + '条数据'
			},
			// 主动触发下拉刷新
			triggerDownScroll() {
				this.mescroll.scrollTo(0, 0)
				this.mescroll.triggerDownScroll()
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					let page = {}
					page.num = 1;
					this.upCallback(page)
				}
			},
			setMydot() {
				this.$refs.mytabs.setDot(0)
			},
			removeMydot() {
				this.$refs.mytabs.removeDot(0);
			},
			toDetail(id, BusinId, BusinKind) {
				this.paramsRead.msgId = id;
				//console.log(this.paramsRead)
				var data = this.$u.api.MarkRead(this.paramsRead)
				if (BusinKind == 1 || BusinKind == 2) {
					let url = "/pages/work_details/work_details"
					this.$u.route(url, {
						id: BusinId
					})
				}
			}
		}
	}
</script>

<style>
	.status_bar {
		background-color: #FFFFFF;
	}

	.header_title {
		font-size: 20px;
		font-weight: 600;
		text-align: center;
		padding: 10px 0;
		background-color: #FFFFFF;
	}

	.nav {
		background-color: #FFFFFF;
	}

	page {
		background-color: #F2F2F2;
	}

	.content {
		width: 100%;
		height: auto;
		padding: 0px 10px;
	}

	.content_list {
		background-color: #FFFFFF;
		border-radius: 5px;
		margin: 10px;
		padding: 10px 10px;
	}

	.contenr_top {
		padding: 10px 10px;

	}

	.contenr_top text {
		font-size: 16px;
	}

	.contenr_center {
		padding: 8px 10px;
		font-size: 14px;
		color: #999999;
		border-bottom: 0.5px solid #F0F0F0;

	}

	.contenr_center text {}

	.contenr_bottom {
		display: flex;
		justify-content: space-between;
		padding: 10px 10px;
		color: #999999;
		font-size: 12px;
	}
</style>
